<template>
    <div class='fxn-login'>
        <div class="fxn-login-img">
            <div class="logo">
                <img src="@/static/img/logo.svg" alt="">
            </div>
        </div>
        <!-- Left End -->
        <div class="fxn-login-win">
            <div class="title">
                嗨,{{hoursTip}}
                <div class="sub">欢迎您使用杰誉律所管理系统</div>
            </div>
            <div class="from">
                <el-form ref="loginForm" :model="ruleForm" :rules="refruleForm" @keyup.enter="handleSubmit">
                    <el-form-item prop="user_name">
                        <el-input v-model="ruleForm.user_name" prefix-icon="User" size="large" placeholder="输入用户名"></el-input>
                    </el-form-item>

                    <el-form-item prop="password">
                        <el-input v-model="ruleForm.password" type="password" prefix-icon="Lock" size="large" placeholder="输入密码"></el-input>
                    </el-form-item>
                </el-form>
                <el-button class="fxn-login-btn fxn-button-block" type="primary" size="large" :loading="btnLoading" @click="handleSubmit()">提交</el-button>
            </div>
        </div>
        <!-- Right End -->
    </div>
    <!-- Login End -->
</template>

<script>
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, onBeforeUnmount } from 'vue'
    export default defineComponent({
        name: '登录',
        setup() {
            const { proxy } = getCurrentInstance();
            //初始化数据
            const state = reactive({
                hoursTip: '',

                //登录表单
                btnLoading: false,
                loginForm: '',
                ruleForm: {
                    user_name: '',
                    password: '',
                },
                refruleForm: {
                    user_name: [
                        { required: true, message: "请输入用户名", trigger: "blur" },
                    ],
                    password: [{ required: true, message: "请输入密码", trigger: "blur" }]
                }
            })

            //提交
            const handleSubmit = () => {
                state.loginForm.validate((valid) => {
                    if (valid) {
                        state.btnLoading = true;
                        proxy.$http.post('/index/Login/index', state.ruleForm)
                        .then(res=>{
                            state.btnLoading = false;
                            const { code, msg ,data } = res;
                            if(code != 1){
                                return proxy.$msg.error( msg);
                            }else{
                                proxy.$msg.success( '登录成功!');
                                localStorage.setItem('token', data.token);
                                localStorage.setItem('member_info', JSON.stringify(data.member_info));
                                location.href = '/';
                            }
                        })
                    }
                })
            }
            
            //Dom加载
            onMounted(()=>{
                //获取时段
                let date = (new Date()).getHours();                
                if(date >= 0 && date < 12){
                    state.hoursTip = "上午好"
                }else if(date >= 12 && date < 18){
                    state.hoursTip = "下午好"
                }else{
                    state.hoursTip="晚上好"
                }
            })
            
            return {
                ...toRefs(state),

                //请求方法
                handleSubmit,

                //组件方法
            }

        },
    })
</script>

<style scoped>
    .fxn-login{
        margin: 120px auto auto;
        width: 800px;
        background: #FFFFFF;
        box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.15);
        overflow: hidden;
    }

    .fxn-login-img{
        float: left;
        width: 300px;
        height: 500px;
        color: #FFFFFF;
        background: url(@/static/img/login-bg.png) no-repeat;
        background-size: 100% 100%;
        position: relative;
        overflow: hidden;
    }

    .fxn-login-img .logo{
        padding: 2rem;
    }

    .fxn-login-img img{
        height: 1.8rem;
    }

    .fxn-login-win{
        float: left;
        width: 340px;
        padding: 30px 80px;
        border-radius: 4px;
    }

    .fxn-login-win .title{
        margin: 50px 0;
        font-size: 28px;
    }

    .fxn-login-win .title .sub{
        color: #6A74A5;
        font-size: .7rem;
    }

    .fxn-login-btn{
        margin-top: 30px;
    }
</style>